<!DOCTYPE html>
<html>
<head>
    {include file="layout:_meta_index" /}
</head>
<body>

<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-form layui-card-header layuiadmin-card-header-auto">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <input type="text" name="sn" placeholder="订单号" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">订单状态</label>
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <select name="state">
                                <option value="10">--订单状态--</option>
                                <option value="0">取消订单</option>
                                <option value="1">待接订单</option>
                                <option value="2">处理中订单</option>
                                <option value="3">完成订单</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">日期范围</label>
                    <div class="layui-inline" id="choose_time">
                        <div class="layui-input-inline">
                            <input type="text" autocomplete="off" name="start_time" id="start_time" class="layui-input"
                                   placeholder="开始日期">
                        </div>
                        <div class="layui-form-mid">-</div>
                        <div class="layui-input-inline">
                            <input type="text" autocomplete="off" name="end_time" id="end_time" class="layui-input"
                                   placeholder="结束日期">
                        </div>
                    </div>
                </div>

                <div class="layui-inline">
                    <button class="layui-btn layuiadmin-btn-admin" lay-submit lay-filter="listSearch">
                        <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                    </button>
                </div>
            </div>
        </div>

        <div class="layui-card-body">
            <table id="listTable" lay-filter="listTable"></table>
            <script type="text/html" id="buttonTpl">
                {{#  if(d.state == 1){ }}
                <button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="change">待接订单</button>
                {{#  } else if(d.state == 2){ }}
                <button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="change">已接订单</button>
                {{#  } else if(d.state == 3){ }}
                <button class="layui-btn  layui-btn-xs" lay-event="change">完成订单</button>
                {{#  } else { }}
                <button class="layui-btn layui-btn-warm layui-btn-xs" lay-event="change">订单取消</button>
                {{#  } }}
            </script>
            <script type="text/html" id="buttonTp2">
                {{#  if(d.pay_state == 1){ }}
                <button class="layui-btn layui-btn-xs">已付款</button>
                {{#  } else { }}
                <button class="layui-btn layui-btn-warm layui-btn-xs">未付款</button>
                {{#  } }}
            </script>
            <script type="text/html" id="buttonTp3">
                {{#  if(d.is_verify == 1){ }}
                <button class="layui-btn layui-btn-xs" lay-event="verify">已核验</button>
                {{#  } else { }}
                <button class="layui-btn layui-btn-warm layui-btn-xs" lay-event="verify">未核验</button>
                {{#  } }}
            </script>
            <script type="text/html" id="listTableBar">
                <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="addRowTable">详情</a>
                <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="printer">打印</a>
            </script>
        </div>
    </div>
</div>
{include file="layout:_footer" /}
<script>
    var add_url = '{:url("order/edit")}';
    var printerurl = '{:url("order/printer")}';
    var verify_url = '{:url("order/verify_url")}';
    layui.config({
        base: '__static__/admin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form', 'table', 'common', 'laydate'], function () {
        var $ = layui.$
            , common = layui.common
            , form = layui.form
            , table = layui.table
            , laydate = layui.laydate;

        //数据列表
        table.render({
            elem: '#listTable',
            url: "{:url('order/list')}",
            toolbar: '#listTableToolbar',
            totalRow: true,//开启合计行
            cols: [[
                // {type: 'checkbox'},
                {field: 'id', title: 'ID', align: "center"},
                {field: 'sn', title: '订单编号', align: 'center'},
                {field: 'user_id', title: '用户', align: 'center'},
                {field: 'table', title: '房间/桌号', align: 'center'},
                {field: 'price', title: '成交金额', align: 'center', totalRow: true},
                {field: 'total_price', title: '订单金额', align: 'center', totalRow: true},
                {field: 'create_time', title: '添加时间', align: 'center'},
                {field: 'state', title: '订单状态', align: 'center', templet: '#buttonTpl', width: 100},
                {field: 'is_verify', title: '核验', align:'center',templet: '#buttonTp3',width:100},
                {field: 'state', title: '付款状态', align: 'center', templet: '#buttonTp2', width: 100},
                // {
                //     field: 'btn',
                //     align: 'center',
                //     title:'订单详情',
                //     templet: function (d) {
                //         return '<a style="width: 100%; height: 100%;cursor: pointer;color: red" lay-event="addRowTable">点击展开</a>'
                //     }
                // },
                {title: '操作', fixed: "right", align: "center", templet: '#listTableBar', width: 170}
            ]],
            page: true, //是否显示分页
            limits: [10, 15, 20, 25, 30],//显示
            limit: 15 //每页默认显示的数量
            , height: document.documentElement.clientHeight / 5 * 4
        });

        //监听搜索
        common.tableSearch('listSearch', 'listTable');


        //日期
        laydate.render({
            elem: '#start_date'
            // ,type: 'datetime'
            , trigger: 'click'//呼出事件改成click
        });
        laydate.render({
            elem: '#end_date'
            //  ,type: 'datetime'
            , trigger: 'click'//呼出事件改成click
        });
        //日期范围
        laydate.render({
            elem: '#choose_time'
            //设置开始日期、日期日期的 input 选择器
            //数组格式为 2.6.6 开始新增，之前版本直接配置 true 或任意分割字符即可
            , range: ['#start_time', '#end_time']
            , trigger: 'click'//呼出事件改成click
        });
        //列表操作
        table.on('tool(listTable)', function (obj) {
            var layEvent = obj.event, data = obj.data;
            var $this = $(this);
            var tr = $this.parents('tr');
            var trIndex = tr.data('index');

            if (layEvent === 'del') { //删除
                common.tableDelete(del_url, data.id, 'listTable');
            } else if (layEvent === 'edit') {
                common.adminShow(add_url + '?id=' + data.id, "编辑", '80%', '80%', 'addEdit', 'listTable');
            } else if (layEvent === 'addRowTable') {
                // 外围的table的id + tableIn_ + 当前的tr的data-index
                $(this).attr('lay-event', 'fold').html('<font color="#FFF">关闭</font>');
                var tableId = 'tableOut_tableIn_' + trIndex;
                var _html = [
                    '<tr class="table-item">',
                    '<td colspan="' + tr.find('td').length + '" style="border: #40AFFE 2px solid; padding: 5px;">',
                    '<table id="' + tableId + '" ></table>',
                    '</td>',
                    '</tr>'
                ];
                console.log(data, '=====================>字段<');
                tr.after(_html.join('\n'));
                // 渲染table
                table.render({
                    elem: '#' + tableId,
                    data: data.goods || [],
                    width: '100%',
                    page: true,
                    totalRow: true,//开启合计行
                    cols: [[
                        {field: 'id', title: 'id', width: 150},
                        {field: 'goodsname', title: '商品名称', width: 200},
                        {field: 'goods_attr', title: '规格', width: 200},
                        {field: 'goods_price', title: '价格', totalRow: true, width: 150},
                        {field: 'goods_num', title: '数量', width: 150},
                        {field: 'total_price', title: '价格小计', totalRow: true, width: 150},
                    ]],

                });
                // $(window).resize();

            } else if (layEvent === 'fold') {
                $(this).attr('lay-event', 'addRowTable').html('<font color="#FFF">详情</font>');
                tr.next().remove();
            } else if (layEvent === 'printer') {
                common.adminShow(printerurl + '?order_id=' + data.id, "打印订单", '80%', '80%', 'addEdit', 'listTable');
            }

        });

        //列表工具栏操作
        table.on('toolbar(listTable)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'del':
                    common.tableDelete(del_url, checkStatus.data, 'listTable');
                    break;
                case 'add':
                    common.adminShow(add_url, "添加", '80%', '80%', 'addEdit', 'listTable');
                    break;
            }
        });


    });
</script>
</body>
</html>

